<!DOCTYPE html>
<html>
<head>
<%include("../../tpl/head.html"){}%>
<title>后台管理-WebScoket</title>
</head>
<body class="sidebar-mini fixed skin-blue">
	<div class="wrapper">
		<!-- 头部 -->
		<%include("../../tpl/header.html"){}%>
		<!-- 网页正文 -->
		<div class="content-wrapper">
			<!-- 网页正文-面包屑 -->
			<div class="content-header">
				<h1>WebScoket</h1>
				<ol class="breadcrumb">
					<li><a href="/admin/index.jspx"><i class="fa fa-dashboard"></i> 后台系统</a></li>
					<li><a href="#">通知消息</a></li>
					<li class="active">WebScoket</li>
				</ol>
			</div>
			<!-- 网页正文-主体 -->
			<section class="content">
				<div class="row">
					<div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
						<!-- DIRECT CHAT PRIMARY -->
						<div class="box box-primary direct-chat direct-chat-primary">
							<div class="box-header with-border">
								<h3 class="box-title">聊天室</h3>
								<div class="box-tools pull-right">
									<span data-toggle="tooltip" title="未读消息" class="badge bg-light-blue">3</span>
									<button type="button" class="btn btn-box-tool" data-widget="collapse">
										<i class="fa fa-minus"></i>
									</button>
									<button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
										<i class="fa fa-comments"></i>
									</button>
									<button type="button" class="btn btn-box-tool" data-widget="remove">
										<i class="fa fa-times"></i>
									</button>
								</div>
							</div>
							<!-- /.box-header -->
							<div class="box-body">
								<div class="direct-chat-messages"></div>
								<div class="direct-chat-contacts">
									<ul class="contacts-list">
										<li><a href="#"> <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
												<div class="contacts-list-info">
													<span class="contacts-list-name"> Count Dracula <small class="contacts-list-date pull-right">2/28/2015</small>
													</span> <span class="contacts-list-msg">How have you been? I was...</span>
												</div> <!-- /.contacts-list-info -->
										</a></li>
									</ul>
								</div>
							</div>
							<div class="box-footer">
								<div class="input-group">
									<input type="text" id="message" placeholder="..." class="form-control">
									<div class="input-group-btn">
										<button type="button" class="btn btn-primary btn-flat" id="send_message">发送</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- /.content -->
		</div>
		<!-- 网页底部 -->
		<%include("../../tpl/footer.html"){}%>
	</div>
	<%include("../../tpl/script.html"){}%>
	<script src="/assets/plugins/sockjs-client/sockjs.js"></script>
	<script type="text/javascript">
		var scoket = null;
		$(document).ready(function() {
			Ajax.post('/admin/api/socket.json', {}, function(result) {
				var $btn = $('#send_message');
				$btn.data("name", result.name);
				$btn.data("icon", result.icon);
				$btn.data("account", result.account);
				scoket = new SockJS("/socket/test?account=" + result.account, null, []);
				scoket.onmessage = function(e) {
					var data = JSON.parse(e.data);
					laytpl($('#remote_message').html()).render(data, function(html) {
						$('.direct-chat-messages').append(html);
					})
				};
				scoket.onopen = function() {
					console.log("连接建立");
				};
				scoket.onclose = function(e) {
					console.log("连接关闭");
					console.log(e);
				};
				scoket.onerror = function(e) {
					console.log("连接异常");
					console.log(e);
				};
			})
			$('#send_message').on('click', function() {
				var data = $.extend($(this).data(), {
					message : $('#message').val(),
					time : new Date()
				});
				scoket.send(JSON.stringify(data));
				laytpl($('#self_message').html()).render(data, function(html) {
					$('.direct-chat-messages').append(html);
				})
			})
		});
	</script>
	<script type="text/html" id="self_message">
        <div class="direct-chat-msg right">
            <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">{{d.name}}</span> <span class="direct-chat-timestamp pull-left">{{d.time}}</span>
            </div>
            <img class="direct-chat-img" src="{{d.icon}}">
            <div class="direct-chat-text">{{d.message}}</div>
        </div>
    </script>
	<script type="text/html" id="remote_message">
        <div class="direct-chat-msg">
            <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">{{d.name}}</span> <span class="direct-chat-timestamp pull-right">{{d.time}}</span>
            </div>
            <img class="direct-chat-img" src="{{d.icon}}">
            <div class="direct-chat-text">{{d.message}}</div>
        </div>
    </script>
</body>
</html>
